/* 职务岗位 */
import React, { PureComponent } from 'react';
import { Table, Pagination, Form, Input, Button, Select, Modal, message } from 'antd';
import { addPosition, getPositon, editPosition, deletePosition } from '@/services/peoples';
class Index extends PureComponent<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      addVisible: false,
      type: '',
      name: '',
      searchType: '',
      searchName: '',
      currentPage: 1,
      count: null,
      dataSource: [],
      editType: '',
      editName: '',
      editVisible: false,
      currentRow:{id: null, type: "", name: ""},
      loading:false
    }
  }
  renderList = (page: string) => {
    const { searchName, searchType } = this.state;
    getPositon({ type: searchType, name: searchName, page }).then(res => {
      this.setState({
        dataSource: res.data,
        count: res.count
      })
    })
  }
  changeValue=(e:any,name:string)=>{
    this.setState({
      [name]:e
    })
  }
  changeValueWithTarget=(e:any,name:string)=>{
    this.setState({
      [name]:e.target.value
    })
  }
  searchHandle = () => {
    this.setState({
      currentPage: 1
    })
    this.renderList('1')
  }
  changePage = (e: number) => {
    this.setState({
      currentPage: e
    })
    this.renderList(String(e))
  }


  openAdd = () => {
    this.setState({
      addVisible: true
    })
  }
  hideAdd = () => {
    this.setState({
      addVisible: false
    })
  }
  addHandle = () => {
    const { type, name, currentPage } = this.state;
    this.setState({
      loading:true
    })
    addPosition({ type, name }).then(res => {
      this.setState({
        loading:false
      })
      if (res.status === 1) {
        this.setState({
          addVisible: false
        })
        this.renderList(currentPage)
        message.success('增加成功')
      } else {
        message.error('增加失败')
      }
    })
  }


  openEdit = (row)=>() => {
    this.setState({
      editVisible: true,
      currentRow: row,
      editType:row.type,
      editName:row.name
    })
  }
  hideEdit = () => {
    this.setState({
      editVisible: false
    })
  }
  editHandle = () => {
    const { editType, editName, currentPage, currentRow } = this.state;
    this.setState({
      loading:true
    })
    editPosition({ type: editType, name: editName, id: currentRow.id }).then(res => {
      this.setState({
        loading:false
      })
      if (res.status === 1) {
        this.setState({
          editVisible: false
        })
        this.renderList(currentPage)
        message.success('编辑成功')
      } else {
        message.error('编辑失败')
      }
    })
  }

  deleteHandle = (key) => () => {
    const { currentPage } = this.state;
    Modal.confirm({
      title: '提示',
      content: '确定删除该职务岗位？',
      okText: '确定',
      cancelText: '取消',
      onOk: () => {
        deletePosition({ id: key }).then(res => {
          if (res.status === 1) {
            message.success('已删除')
            this.renderList(currentPage)
          } else {
            message.error('删除失败')
          }
        })
      }
    })
  }
  componentDidMount() {
    this.renderList('')
  }

  render() {
    const { addVisible, dataSource, count, currentPage, editVisible,editType,editName ,loading} = this.state;
    const columns = [
      {
        title: '所属类别',
        dataIndex: 'type',
        key: 'type',
      },
      {
        title: '名称信息',
        dataIndex: 'name',
        key: 'name',
      },

      {
        title: '操作',
        dataIndex: 'id',
        key: 'id',
        render: (id,row) => {
          return (
            <div>
              <a style={{ marginRight: 10 }} onClick={this.openEdit(row)}>编辑</a>
              <a onClick={this.deleteHandle(id)}>删除</a>
            </div>
          );
        },
      },
    ];

    return (
      <div>
        <div style={{ overflow: 'hidden' }}>
          <Form layout="inline" style={{ marginBottom: 20, float: 'right' }}>
            <Form.Item>
              <Select placeholder="所属类别" onChange={(e:any)=>this.changeValue(e,'searchType')}>
                <Select.Option value="0">所有类别</Select.Option>
                <Select.Option value="1">职务名称</Select.Option>
                <Select.Option value="2">岗位名称</Select.Option>
              </Select>
            </Form.Item>
            <Form.Item>
              <Input placeholder="名称信息" onChange={(e:any)=>this.changeValueWithTarget(e,'searchName')} />
            </Form.Item>
            <Form.Item>
              <Button type="primary" onClick={this.searchHandle}>查询</Button>
            </Form.Item>
            <Form.Item>
              <Button type="primary" danger onClick={this.openAdd}>增加</Button>
            </Form.Item>
          </Form>
        </div>
        <Table columns={columns} pagination={false} dataSource={dataSource} rowKey="id"></Table>
        <Pagination
          showQuickJumper
          showSizeChanger={false}
          locale="zh-CN"
          total={count}
          current={currentPage}
          onChange={this.changePage}
          style={{ float: 'right', marginTop: 25 }}
          showTotal={(total, range) => `第${range[0]}条-第${range[1]}条，共 ${total} 条`}
        />
        <Modal confirmLoading={loading} visible={addVisible} title="增加职务岗位" onCancel={this.hideAdd} onOk={this.addHandle}>
          <Form>
            <Form.Item label="所属类别">
              <Select placeholder="请选择所属类别" onChange={(e:any)=>this.changeValue(e,'type')}>
                <Select.Option value="1">职务名称</Select.Option>
                <Select.Option value="2">岗位名称</Select.Option>
              </Select>
            </Form.Item>
            <Form.Item label="名称信息">
              <Input placeholder="名称信息" onChange={(e:any)=>this.changeValueWithTarget(e,'name')} />
            </Form.Item>

          </Form>
        </Modal>
        <Modal confirmLoading={loading} visible={editVisible} title="编辑职务岗位" onCancel={this.hideEdit} onOk={this.editHandle}>
          <Form>
            <Form.Item label="所属类别">
              <Select placeholder="请选择所属类别" onChange={(e:any)=>this.changeValue(e,'editType')}  value={editType}>
                <Select.Option value="1">职务名称</Select.Option>
                <Select.Option value="2">岗位名称</Select.Option>
              </Select>
            </Form.Item>
            <Form.Item label="名称信息">
              <Input placeholder="名称信息" onChange={(e:any)=>this.changeValueWithTarget(e,'editName')} value={editName}/>
            </Form.Item>

          </Form>
        </Modal>
      </div>
    );
  }
}

export default Index;
